<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>THREE.JS + css3 + WebGl 实际应用</title>
		<script type="text/javascript" src="js/three.js" ></script>
		<script type="text/javascript" src="js/Tween.js" ></script>
		<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
		<link rel="stylesheet" href="css/style.css" />
		<script>
			//字号适配 750px 优先适配ios 640px 优先适配安卓
			(function (doc, win) {
		        var docEl = doc.documentElement,
		            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
		            recalc = function () {
		                var clientWidth = docEl.clientWidth;
		                if (!clientWidth) return;
		                if(clientWidth>=640){
		                    docEl.style.fontSize = '100px';
		                }else{
		                    docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
		                }
		            };
		        if (!doc.addEventListener) return;
		        win.addEventListener(resizeEvt, recalc, false);
		        doc.addEventListener('DOMContentLoaded', recalc, false);
		    })(document,window);
		</script>		
	</head>
	<body>
		<div id="loading">
			<h1>CTVIT</h1>
			<p></p>
		</div>
		<div id="contant"></div>
		<div id="music">
			<audio src="img/Ocean.mp3" id="Jaudio" class="media-audio" autoplay preload loop="loop"></audio>
			<div id="musicplay"></div>
		</div>
		
	</body>
	<script>
		//图片预加载
		var Arry = [
		    "img/bg.jpg",
		    "img/chengshi1.png",
		    "img/chengshi2.png",
		    "img/datu.png",
		    "img/ditie1.png",
		    "img/hongkuang.png",
		    "img/img01.png",
		    "img/img02.png",
		    "img/img03.png",
		    "img/img04.png",
		    "img/img05.png",
		    "img/last.png",
		    "img/title01.png",
		    "img/title02.png",
		    "img/title3.png",
		    "img/title3.png",
		    "img/yun2.png",
		    "img/Ocean.mp3",
		    "img/musicplay.png"
	    ];
	    preloadimages(Arry);
		function preloadimages(arr){   
			    var newimages=[], loadedimages=0
			    var postaction=function(){} 
			    var arr=(typeof arr!="object")? [arr] : arr
			    function imageloadpost(){
			        loadedimages++
			        if (loadedimages==arr.length){
			            postaction(newimages) 
			        }
			    }
			    for (var i=0; i<arr.length; i++){
			        newimages[i]=new Image()
			        newimages[i].src=arr[i]
			        newimages[i].onload=function(){
			            imageloadpost()
			        }
			        newimages[i].onerror=function(){
			            imageloadpost()
			        }
			    }
			    return {
			        done:function(f){
			            postaction=f || postaction
			        }
			    }
			}
	</script>
	<script>
		//页面loading
		var loading = false;
		var prg = 0;
		var timer = setInterval(function(){
			if(prg>=80){
				 clearInterval(timer)
				 prg = 100;
			}
			else{
				prg++;
			}
			$("#loading p").css("width",prg+"%");
		},100);
		window.onload = function(){
			console.log("onload");
			clearInterval(timer);
			var timer = setInterval(function(){
				 if (prg >= 100) {  
			      clearInterval(timer);
			      prg = 100;
			      loading = true;
			      $("#loading").hide();
			    } else {
			      prg++
			    }
			$("#loading p").css("width",prg+"%");
			})
		}
	</script>
	<script>
		//页面音乐加载 暂停及播放方法 WeixinJSBridgeReady 解决微信不自动播放问题  YixinJSBridgeReady 易信不自动播放问题
		var timeItem = 0,musicplaybool = true,times;
		function audioAutoPlay(id,btns){
			var audio = document.getElementById(id);
			var btn = document.getElementById(btns);
			play = function(){
	            audio.play();
	            times = setInterval(function(){
					$("#musicplay").css("transform","rotate("+timeItem+"deg)");
					timeItem+=0.1;
				})
	            document.removeEventListener("touchstart",play, false);  
	       	};
		    stop = function(){
		    	if(musicplaybool){
		    	   audio.pause();
		    	   musicplaybool = false;
		    	   clearInterval(times)
		    	}
		    	else{
		    		play();
		    	}
		    }
	        audio.play();  
		    document.addEventListener("WeixinJSBridgeReady", function () {  
		        play();  
		    }, false);  
		    document.addEventListener('YixinJSBridgeReady', function() {  
		        play();  
		    }, false);  
		    document.addEventListener("touchstart",play, false); 
		    btn.addEventListener("touchend",stop,false)	
		}
		audioAutoPlay('Jaudio','musicplay'); 
		
	</script>
	<script>		
		var camera,renderer,scene,isVr=false,scene_root,displacement = 0;
		var W = window.innerWidth;
		var H = window.innerHeight;
		var textureload = new THREE.TextureLoader();
		
		
		var list = [
		{
			src:"img/img01.png",
			wh:[1.504,2.66,1],
			pos:[0,0,-1.2]
		},
		{
			src:"img/img02.png",
			wh:[0.9,0.6,1],
			pos:[-0.6,0.1,-3.3]	
		},
		{
			src:"img/img03.png",
			wh:[0.9,0.6,1],
			pos:[0.6,0.1,-3.3]	
		},
		{
			src:"img/title01.png",
			wh:[0.5,0.16,1],
			pos:[0,0.5,-2.7]	
		},
		{
			src:"img/img05.png",
			wh:[1.5,0.48,1],
			pos:[1,0,-3.6]	
		},
		{
			src:"img/img05.png",
			wh:[1.5,0.48,1],
			pos:[0,0,-3.6]	
		},
		{
			src:"img/img05.png",
			wh:[0.5,0.16,1],
			pos:[-0.6,0.2,-3.6]	
		},
		{
			src:"img/img05.png",
			wh:[1,0.32,1],
			pos:[0.6,0.2,-3.6]	
		},
		{
			src:"img/img04.png",
			wh:[1.504,2.66,1],
			pos:[0,0.1,-4.2]	
		},
		{
			src:"img/img05.png",
			wh:[2,1,1],
			pos:[0,0.6,-4.3]	
		},
		{
			src:"img/img05.png",
			wh:[3,1.5,1],
			pos:[0,0,-4.3]	
		},
		{
			src:"img/title4.png",
			wh:[0.5,0.16,1],
			pos:[0,0.5,-6]	
		},
		{
			src:"img/chengshi2.png",
			wh:[2.66,1.504,1],
			pos:[0,-0.3,-6.6]	
		},
		{
			src:"img/chengshi1.png",
			wh:[2.66,1.504,1],
			pos:[0,0,-7.3]	
		},
		{
			src:"img/yun2.png",
			wh:[1.504,1,1],
			pos:[0,0.3,-7.6]	
		},
		{
			src:"img/title3.png",
			wh:[0.5,0.16,1],
			pos:[0,0.5,-9.2]	
		},
		{
			src:"img/ditie1.png",
			wh:[1.504,1,1],
			pos:[-0.7,-0.4,-11]	
		},
		{
			src:"img/hongkuang.png",
			wh:[3,1.5,1],
			pos:[0.05,-0.3,-12.5]	
		},
		{
			src:"img/yun2.png",
			wh:[3,2,1],
			pos:[0,-0.8,-12.3]	
		},
		{
			src:"img/yun2.png",
			wh:[4,2.8,1],
			pos:[0,0.5,-12.8]	
		},
		{
			src:"img/title02.png",
			wh:[0.5,0.16,1],
			pos:[0,0.5,-14.6]	
		},
		{
			src:"img/yun2.png",
			wh:[4.8,1.8,1],
			pos:[-0.3,0.9,-15]	
		},
		{
			src:"img/datu.png",
			wh:[3,1.5,1],
			pos:[0.2,0,-15.6]	
		},
		{
			src:"img/yun2.png",
			wh:[1.28,0.48,1],
			pos:[0.15,0.5,-15.8]
		},
		{
			src:"img/last.png",
			wh:[0.52,1,1],
			pos:[0,0,-16]
		}]
		
		
		function init(){
			
			camera = new THREE.PerspectiveCamera(75,W/H,0.1,10000);
//			测试代码
			camera.position.set(0,0,-4.3);
			
			scene = new THREE.Scene();
			
			scene_root = new THREE.Object3D();
			scene_root.name = "Element";
			scene.add(scene_root);
			
			renderer = new THREE.WebGLRenderer({antialias:true,alpha:true});
			renderer.setSize(W,H);
			$("#contant").append(renderer.domElement);
			
			
			window.addEventListener('resize', onResize, true);
		    window.addEventListener('vrdisplaypresentchange', onResize, true);
			window.addEventListener("touchstart",Touchstart,true);
			window.addEventListener("touchmove",Touchmove,true);
			creatElement();
				
		}
		
//		t 是测试用代码
		var t = 0;
		function animate(){
			requestAnimationFrame(animate);
			if(isVr){
			   effect.render(scene, camera);
			}else{
			   renderer.render(scene,camera);
			}			
			camera.position.set(0,0,displacement)
			
		}
		
		function Touchstart(e){
		    e.preventDefault();
		    console.log(e)
		    startX = e.changedTouches[0].pageX,
		    startY = e.changedTouches[0].pageY;
		}
		
		function Touchmove(e){
			e.preventDefault();
			moveEndX = e.changedTouches[0].pageX,
			moveEndY = e.changedTouches[0].pageY,
			X = moveEndX - startX,
			Y = moveEndY - startY;
			if( Math.abs(Y) > Math.abs(X) && Y > 0) {
			    console.log("top2 bottom");
			    if(displacement>0){
				 	return false;
				 	displacement = 0;
				 }else{
				 	displacement+=0.05;
				 }
			}else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) {
				console.log("bottom2 top");
				 if(displacement<-15.5){
				 	return false;
				 }else{
				 	displacement-=0.05;
				 }
			}
			else{console.log("just touch");}
			console.log(camera.position)
		}
		
		function onResize(e) {
			camera.aspect = W / H;
			camera.updateProjectionMatrix();
			if (isVr) {
				effect.setSize(W,H);
			} else {
				renderer.setSize(W,H);
			}
		}
		
		
		function creatElement(){
			this.createGroup = function(){ //在这里创建场景中的所有数据  数据集合
				var SELF = this,
				parItem = null;
				for(var i = 0;i<list.length;i++){
					parItem = list[i];
					SELF.creatplane(parItem,scene_root);
				}
			},
			this.creatplane = function(parItem,parent){
				var geometry = new THREE.PlaneBufferGeometry(parItem.wh[0],parItem.wh[1],parItem.wh[2]);
				var textrue = textureload.load(parItem.src);
				var material = new THREE.MeshBasicMaterial( {color:0xffffff,side: THREE.DoubleSide,map:textrue,transparent:true} );
				var plane = new THREE.Mesh( geometry, material );
				plane.position.set(parItem.pos[0],parItem.pos[1],parItem.pos[2])
				parent.add(plane);
			}
			
			createGroup();
		}
		
		
		init();
		animate();

	</script>
</html>
